<template>
  <div>
    <!-- 查询 -->
    <el-form ref="unloadGoodsDTO" :model="unloadGoodsDTO" label-width="80px" :inline="true">
      <el-button type="primary" @click="add" >新增入库单</el-button>
      <el-form-item label="名字">
        <el-input v-model="unloadGoodsDTO.gname" clearable></el-input>
      </el-form-item>
      <el-form-item label="入库状态">
        <el-select v-model="unloadGoodsDTO.isunload"  clearable  placeholder="请选择">
        <el-option
      v-for="item in isunloads"
      :key="item.value"
      :label="item.label"
      :value="item.value">
  
    </el-option>
  </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"  icon="el-icon-search">搜索</el-button>
        <!-- <el-button type="primary" @click="add">添加</el-button> -->
        <!-- <el-badge :value="12" class="item">
          <el-button @click="toggleSelection()">入库审核</el-button>
        </el-badge> -->
       
      </el-form-item>
    </el-form>
    <!-- 展示数据 -->
    <el-table :data="pageBean.beanList" style="width: 100%"   @selection-change="handleSelectionChange" >
      <el-table-column
      
      width="55">
    </el-table-column>
      <el-table-column prop="gname" label="物品" > </el-table-column>
      <el-table-column prop="beforeNumber" label="商品入库前库余" width="150"  align="center"></el-table-column>
      <el-table-column prop="currentNumber" label="当前入库量"> </el-table-column>
      <el-table-column prop="isunload" label="是否入库"> </el-table-column>
      <el-table-column prop="ioemployee" label="库管对接人"> </el-table-column>
      <el-table-column prop="source" label="货源类型"> </el-table-column>
      <el-table-column prop="approveMan" label="审批人"> </el-table-column>
      <el-table-column prop="isApprove" label="审批结果"> </el-table-column>
      <el-table-column prop="isApprove" label="审核" width="240" align="center"> 
        <template v-slot="scope">
    <el-button type="success" @click="changeState(scope.row, '通过')" :disabled="scope.row.isApprove !== '待审核'">审核通过</el-button>
    <el-button type="danger" @click="changeState(scope.row, '不通过')" :disabled="scope.row.isApprove !== '待审核'">审核不通过</el-button>
    <!-- <el-button type="success" @click="changeState(scope.row, '通过')" :disabled="isApprove(scope.row)">审核通过</el-button>
    <el-button type="danger" @click="changeState(scope.row, '不通过')" :disabled="isApprove(scope.row)">审核不通过</el-button> -->
  </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >详情</el-button
          >
          <el-button type="text" @click="updateEmployee(scope.row)"
            >表单打印</el-button
          >
          <el-button  type="text" @click="handleClickBydelete(scope.row)" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[10, 150 ,200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
    </div>
    <!-- //入库新增模态框 -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormUnloadGoods" @close="closeDialog">
      <el-form  :model="addUnloadGoods" label-width="80px">
        <el-form-item label="商品名称" >
        <el-select v-model="addUnloadGoods.gname"    clearable  placeholder="请选择">
          <el-option
        v-for="item in goods"
        :key="item.gid"
        :label="item.gname"
        :value="item.gname">
        <span>{{item.gname}}</span>
        <span> 库余：{{item.sum}}</span>
        </el-option>
      </el-select>
      </el-form-item>
        <el-form-item label="入库数">
          <el-input v-model="addUnloadGoods.currentNumber"></el-input>
        </el-form-item>
        <el-form-item label="送货人">
          <el-input v-model="addUnloadGoods.deliveryMan"></el-input>
        </el-form-item>
        <el-form-item label="送货单号">
          <el-input v-model="addUnloadGoods.deliveryNo" ></el-input>
        </el-form-item>
        <el-form-item label="预计入库时间" >
          <div class="block">
            <el-date-picker
              v-model="addUnloadGoods.storageTime"
              align="right"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd"
              :picker-options="pickerOptions">
            </el-date-picker>
      </div>
        </el-form-item>
        <el-form-item label="审批人">
          <el-select v-model="addUnloadGoods.approveMan"   clearable  placeholder="请选择">
          <el-option
          v-for="item in employee"
          :key="item.eid"
          :label="item.ename"
          :value="item.ename">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="addUnloadGoods.source"   clearable  placeholder="请选择">
          <el-option
          v-for="item in sources"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addUnloadGoods.unloadgoodsDesc" ></el-input>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-input v-model="addUnloadGoods.annex" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="notOK">取 消</el-button>
        <el-button type="primary" @click="OK">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>
<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
    //查询列表
      unloadGoodsDTO: {},
      //是否入库
      isunloads: [{
          value: '已入库',
          label: '已入库'
        }, {
          value: '待入库',
          label: '待入库'
        }, {
          value: '未入库',
          label: '未入库'
        }],
        value: '',
      //列表数据值
      pageBean: {},
      //模态框标题
      dialogFormTitle:'',
      //模态框状态
      dialogFormUnloadGoods:false,
      addUnloadGoods:{},
      //模态框查询人员
      employee: [],
      //货物信息
      goods:[],
      //来源
      sources: [{
          value: '采购入库',
          label: '采购入库'
        }, {
          value: '销售退货',
          label: '销售退货'
        }, {
          value: '生产入库',
          label: '生产入库'
        }],
      ///日期选择
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
       
    };
  },
  mounted() {
    this.getAll();
    this.findEmployee();
    this.findgoods();
  },
  methods: {
      changegoods(item){
        console.log("切换",item);
      },
      //审核过滤,作废不能用
      // isApprove(row){
      //   // if(row.isApprove !== '待审核'){
      //   //     ///得到当前登录用户的用户名
      //   //     let username = window.localStorage.getItem('currentUserName');
      //   //     console.log("当前用户",username);
      //   //     //审核人必须为当前用户。但是当前用户是不是审核人是由后端判定。
      //   //   if(row.approveMan == username && username != null){
      //   //          return true;
      //   //   }
      //   // }
      //   return false;
      // },
      ///这是审核功能的前端实现
      changeState(row,str){
            console.log(row,str);
            row.isApprove=str;
          if(str=='通过'){
            row.isunload='已入库';
          }
          this.$axios.post("http://localhost:8080/unloadgoods/modify",row).then(resp=>{
          if(resp.data.code == 200){
              this.$message(resp.data.msg);
          }else{
              this.$message(resp.data.msg);
          }
          this.getAll();
          this.findgoods();
        });
      },
      //查询人员
      findEmployee(){
        this.$axios.get("http://localhost:8080/employee/find").then(resp=>{
          if(resp.data.code == 200){
              this.employee=resp.data.data;
              console.log(resp.data.data);
              console.log(this.employee);
          }
        });
      },
       //c查询商品信息
       findgoods(){
        this.$axios.get("http://localhost:8080/goods/findEntity").then(resp=>{
          if(resp.data.code == 200){
              this.goods=resp.data.data;
              console.log(resp.data.data);
              console.log(this.goods);
          }
        });
      },
      //模态框关闭
      closeDialog(){
        this.dialogFormUnloadGoods=false;
        this.addUnloadGoods={};
      },
       //内嵌表单的取消
      notOK() {
        this.dialogFormUnloadGoods=false;
        this.addUnloadGoods={};
      },
      //内嵌表单的提交
      OK(){
        console.log("这是模态框");
       console.log(this.addUnloadGoods);
       this.dialogFormTitle='入库单申请';
       this.dialogFormUnloadGoods=false;
        this.$axios.post("http://localhost:8080/unloadgoods/add",this.addUnloadGoods).then(rep=>{
          this.$message(rep.data.msg);
          this.getAll();
          this.addUnloadGoods={};
        });
      },

    handleSelectionChange(val){
        this.multipleSelection=val;
    },
    toggleSelection() {
        console.log(this.multipleSelection);
      },
    closeForm(employeeModify) {
      //关闭校验(暂时没有);
      //this.$refs[employeeModify].resetFields();
    },
    //和修改共用一个内嵌模态框。
    addEmployee() {
      this.dialogFormVisible = true;
      this.dialogFormTitle = '新增人员';
    },
   
    //表单内嵌修改
    updateEmployee(row) {
      this.dialogFormVisible = true;
      this.dialogFormTitle ='修改人员';
      //复制一份属性
      this.employeeModify = { ...row };
    },
   
    add(){
      this.dialogFormUnloadGoods=true;
      console.log("新增");
    },
    //行删除
    handleClickBydelete(row) {
      console.log(row);
    },
  
    //提交
    onSubmit() {
      console.log("submit!");
      // console.log(this.employee);
        console.log("这是查询提交",this.unloadGoodsDTO);
      this.getAll();
    },

    //改变当前显示页数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
    },
    //当前页改变和查询。
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getAll();
    },
    //查询
    getAll() {
      this.$axios
        .post(
          "http://localhost:8080/unloadgoods/getAll/" +
            this.pageIndex +
            "/" +
            this.pageSize,
          this.unloadGoodsDTO
        )
        .then((resp) => {
          console.log(resp.data.data.beanList);
          this.pageBean = resp.data.data;
        });
    },
  },
};
</script>

<style>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>